<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="ID搜索">
            <a-input v-model="queryParam.id" placeholder="ID搜索" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="搜索款号">
            <a-input v-model="queryParam.pcode" placeholder="搜索款号" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="品牌">
            <a-select v-model="queryParam.brand" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in brandList" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="年份" has-feedback>
            <a-date-picker
              mode="year"
              style="width:100%;"
              placeholder="请选择年份"
              format="YYYY"
              v-model="queryParam.year"
              :open="yearShowOne"
              @change="handChange"
              @openChange="openChangeOne"
              @panelChange="panelChangeOne"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="季节">
            <a-select v-model="queryParam.season" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="春">春</a-select-option>
              <a-select-option value="夏">夏</a-select-option>
              <a-select-option value="秋">秋</a-select-option>
              <a-select-option value="冬">冬</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="波段(月)">
            <a-select v-model="queryParam.month" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item" v-for="(item, index) in bandList" :key="index"> {{ item }}月 </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="波段">
            <a-select v-model="queryParam.band" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="A">A</a-select-option>
              <a-select-option value="B">B</a-select-option>
              <a-select-option value="C">C</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="搭配师">
            <a-select v-model="queryParam.fashionerId" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in fashionerList" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="日期" has-feedback>
            <a-range-picker style="width:100%;" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.createTime" />
          </a-form-item>
        </a-col>
        <!-- <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
          <a-form-item label="状态">
            <a-select v-model="queryParam.status" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="1">上架</a-select-option>
              <a-select-option :value="0">下架</a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->

        <a-col :xxl="18" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <!-- <a-button type="primary" style="margin-left: 8px" @click="handleAddAndEdit">新增</a-button>
            <template v-if="selectedRowKeys.length > 0">
              <a-button style="margin-left: 8px" @click="handleUpOrDown(1)">上架</a-button>
              <a-button style="margin-left: 8px" @click="handleUpOrDown(0)">下架</a-button> 
            </template>-->
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { addCondition, upOrDown } from '@/api/box/boxLook'
import moment from 'moment'
let bandList = []
let abc = 'ABC'.split('')
for (let j = 1; j < 13; j++) {
  bandList.push(j)
  // for ( let i = 0; i< abc.length; i++) {
  //   bandList.push(j + abc[i])
  // }
}
export default {
  props: {
    selectedRowKeys: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      bandList,
      fashionerList: [],
      brandList: [],
      yearShowOne: false,
      queryParam: {
        brand: '',
        season: '',
        month: '',
        band: '',
        fashionerId: '',
        status: 1,
        year: null
      }
    }
  },
  computed: {},
  created() {
    this.getCondition()
  },
  methods: {
    handleAddAndEdit() {
      this.$emit('handleAddAndEdit')
    },
    handChange() {
      this.queryParam.year = null
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      this.yearShowOne = status
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.queryParam.year = moment(value).format('YYYY')
      this.yearShowOne = false
    },
    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    reset() {
      this.queryParam = {
        brand: '',
        season: '',
        month: '',
        band: '',
        fashionerId: '',
        status: 1,
        year: null
      }

      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] !== '' && values[i] !== undefined && values[i] !== null) {
          if (i === 'createTime') {
            formValue.createTimeBegin = values[i][0]
            formValue.createTimeEnd = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    },
    handleUpOrDown(type) {
      const data = {
        requestData: {
          ids: this.selectedRowKeys,
          type // :1上架，0下架
        }
      }
      upOrDown(data).then(res => {
        if (res.code == 0) {
          this.$emit('refreshList')
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    getCondition() {
      addCondition().then(res => {
        if (res.code === 0) {
          const { arcBrand, fashioner } = res.data
          this.brandList = arcBrand
          this.fashionerList = fashioner
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
</style>
